<template>
	<div class="download-mgt">
		<van-tabs v-model="active" sticky>
			<van-tab title="单曲"></van-tab>
			<van-tab :title="title">
				<song-list :list='downLoadList' @selectItem='selectItem' :listBtn='false'>
					<div slot="top" class="btn" v-if="downLoadList.length">
						<div @click="changeState">
							<i class="iconfont" :class="state === 'start' ? 'icon-pause' : 'icon-download'"/>
							<span>{{ state === 'start' ? '全部暂停' : '全部开始' }}</span>
						</div>
						<div @click="deleteAllSong">
							<i class="iconfont icon-delete"/>
							<span>清空</span>
						</div>
					</div>
					<div slot="content" slot-scope="{ song }" class="content">
						<div class="content-warpper">
							<div class="content-inner">
								<div class="name">
									{{ song.name }}
								</div>
								<div class="artists">
									<i v-if="song.downLoadState === 'success'" class="iconfont icon-wancheng-copy success"/>
									<i v-if="song.downLoadState === 'fail'" class="iconfont icon-wuuiconsuotanhao fail"/>
									<i v-if="song.downLoadState === 'pause'" class="iconfont icon-pause"/>
									{{ song.artistsNames }} + {{ song.al.name }}
								</div>
							</div>
						</div>
						<div class="progress" v-if="song.percentage">
							<van-progress :percentage="song.percentage" />
						</div>
					</div>
				</song-list>
			</van-tab>
		</van-tabs>
	</div>
</template>
<script>
import SongList from '@/base/song-list'
import { mapMutations } from 'vuex'

export default {
	components: {
		SongList
	},
	computed: {
		title() {
			return `下载中${this.downLoadList.length}`
		},
		downLoadList() {
			return this.$store.state.downloadMgt.downLoadList
		}
	},
	data() {
		return {
			active: 0,
			state: 'start'
		}
	},
	methods: {
		changeState() {
			if (this.state === 'start') {
				this.state = 'pause'
				this.pauseAll()
			} else {
				this.state = 'start'
				this.startAll()
			}
		},
		deleteAllSong() {
      this.$dialog.confirm({
        message: '确定清空下载列表？',
        showCancelButton: true,
        confirmButtonColor: 'red'
      }).then(() => {
        this.deleteAll()
      })
		},
		selectItem(item) {
			if (item.downLoadState === 'fail' || item.downLoadState === 'pause') {
				this.state = 'pause'
				this.startSinger(item)
			}
		},
		...mapMutations('downloadMgt', ['startAll', 'pauseAll', 'deleteAll', 'startSinger'])
	}
}
</script>
<style lang="less" scoped>
@import '~@/style/mixins.less';
@import '~@/style/variable.less';

.download-mgt{
	.route-page();
	overflow: auto;
	.btn{
		display: flex;
		>div{
			flex: 1;
			text-align: center;
			height: 30px;
			line-height: 30px;
			font-size: @font-size-small;
			i{
				font-size: 1em;
			}
		}
	}
	.content{
		align-items: center;
		justify-content: center;
		display: flex;
		flex: auto;
		padding-right: 5px;
		flex-direction: column;
		.content-warpper{
			width: 100%;
			display: flex;
			.content-inner{
				width: 0;
				flex: auto;
				.progress{
					position: absolute;
					width: 100%;
					bottom: 0;
				}
				.name,.artists{
					.ellipsis();
					width: 100%;
					height: 50%;
					line-height: 25px;
				}
				.name{
					font-size: @font-size-normal;
				}
				.artists{
					font-size: @font-size-mini;
					color: @text-color-light;
					.success{
						font-size: 1em;
						color: royalblue;
					}
					.fail{
						font-size: 1em;
						color: red;
					}
				}
			}
		}
		.progress{
			height: 10px;
			width: 100%;
		}
	}
}
</style>